<template>
  <div class="like">
    <div class="like-title">
      <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" />
      <span>猜你喜欢</span>
    </div>
    <ul class="like-list">
      <li  @click="toDetails(idx)" class="like-item" v-for="(item,idx) of likeList" :key="idx">
        <span class="tag" :class="item.tag=='可订明日'?'tag1':'tag2'" v-if="item.tag">{{ item.tag }}</span>
        <img :src="item.imgUrl" :alt="item.title">
        <div class="content">
          <h3>{{ item.title }}</h3>
          <p class="rating">
            <i class="star" v-for="(star,idx) of [1,2,3,4,5]" :key="star">
              <img v-if="item.rating/10>=idx+1" src="@/assets/img/star01.png" />
              <img v-else-if="item.rating/10>=idx && item.rating%10!==0" src="@/assets/img/star02.png" />
              <img v-else src="@/assets/img/star03.png" />
            </i>
            {{ item.ratingCount }}条评论
          </p>
          rating: 34,
          <div class="mark">
            <span class="price">￥{{ item.price }}</span>起
          </div>
          <p class="news" v-if="item.news">{{ item.news }}</p>
        </div>
        <div class="area">{{ item.area }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['likeList'],
  methods: {
    toDetails (id) {
      this.likeList.map((item,index) => {
        if (index === id) {
          this.$router.push('/details?hotData=' + JSON.stringify(item))
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.tag1
  background-color: #00afc7
.tag2
  background-color: orange;
.like
  background-color: #fff
  margin-top: .2rem
  .like-title
    padding: .24rem 0 .26rem .2rem
    font-size: .32rem
    img
      width: .3rem
      height: .3rem
  .like-list
    padding: 0 .2rem .2rem
    font-size: .24rem
    color: #212121
    .like-item
      position: relative
      overflow: hidden
      padding: .2rem 0
      border-bottom: 1px solid #eee
      .tag
        position: absolute
        display: block
        width: 1rem
        height: .4rem
        line-height: .4rem
        border-bottom-right-radius: 40%
        color: #fff
        font-size: .24rem
      img
        float: left
        width: 2rem
        height: 2rem
        margin-right: .22rem
        border-radius: .06rem
      .content
        float: left
        img
          width: .25rem
          height: .25rem
          display: inline-block
          margin-right: -.05rem
      .area
        position: absolute
        right: .2rem
        bottom: .4rem
</style>
